<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
      border: 1px solid #ccc;
    }

    .box {
      width: 800px;
      height: 680px;
      margin: 0 auto;
      background-color: rgb(235, 230, 230);
    }

    .dragBox {
      display: flex;
      width: 100%;
      height: 60%;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: space-between;

    }

    .dragDiv {
      width: 100px;
      height: 100px;
      border-radius: 100px;
      line-height: 100px;
      text-align: center;
      border: 1px solid rgb(80, 77, 77);
      background-color: #7d7a7a;
    }

    .dragCss {
      border: 1px solid blue;
      opacity: 0.5;
    }

    .dropDiv {
      display: flex;
      justify-content: space-around;
      align-items: center;
      width: 80%;
      height: 30%;
      margin: 0 auto;
      border: 1px solid #000;
      background-color: burlywood;
    }

    .dropCss {
      background-color: yellow;
    }
  </style>
</head>

<body>
  <div class="box">
    <h2 style="text-align:center">点餐系统</h2>
    <ul class="dragBox">

    </ul>
    <h2 style="text-align:center">盘子</h2>
    <div class="dropDiv"></div>
  </div>
</body>
<script>
  const foodList = ['火锅', '北京烤鸭', '兰州拉面', '成都冷串串', '重庆酸辣粉', '武汉热干面', '西安肉夹馍', '长沙口味虾', '广东肠粉', '小笼包', '桂林米粉', '柳州螺蛳粉', '天津煎饼果子', '山东煎饼', '东北锅包肉', '福建佛跳墙', '河南烩面', '山西刀削面', '南昌瓦罐汤', '河北驴肉火烧', '手抓饼']
  const dropNode = document.querySelector('.dropDiv')
  const ul = document.querySelector('.dragBox')
  let fragment = document.createDocumentFragment()
  foodList.forEach(item => {
    let li = document.createElement('li')
    li.innerText = item
    li.classList.add('dragDiv')
    li.draggable = 'true'
    fragment.appendChild(li)
  })
  ul.appendChild(fragment)
  // 1.准备工作，先将foodList渲染到ul中
  const dragNodes = document.querySelectorAll('.dragDiv')
  let dragNode = null
  dragNodes.forEach(node => {
    node.addEventListener('dragstart', function (e) {
      console.log('开始拖拉')
      dragNode = e.target
      e.target.classList.add('dragCss')
    })
    node.addEventListener('dragend', function (e) {
      e.target.classList.remove('dragCss')
    })
  })



  dropNode.addEventListener('dragenter', function (e) {
    dragNode.classList.remove('dragCss')
    e.target.classList.add('dropCss')
  })

  dropNode.addEventListener('dragover', function (e) {
    e.preventDefault()
  })
  dropNode.addEventListener('dragleave', function (e) {
    e.target.classList.remove('dropCss')
  })

  dropNode.addEventListener('drop', function (e) {

    if (e.target.children.length > 3) {
      e.target.classList.remove('dropCss')
      alert('最多只能点四个菜哦~')
      return
    }
    let newNode = dragNode.cloneNode(true)
    e.target.classList.remove('dropCss')
    e.target.appendChild(newNode)

  })
</script>

</html>